<template>
    <div>
        <nav-bar title="商品详情"/>
        <div class="outer-swiper">
            <div class="swiper">
                <my-swipe :imgs="imgs"/>
            </div>
        </div>
        <div class="product-desc">
            <ul>
                <li>
                    <span class="product-desc-sapn">
                        {{info.title}}
                    </span>
                </li>
                <li class="price-li">
                    市场价：<s>¥{{info.market_price}}</s> 销售价：<span>¥{{info.sell_price}}</span>
                </li>
                <li class="number-li">
                    购买数量：
                    <span @click="substract">-</span>
                    <span>{{buyNum}}</span>
                    <span @click="add">+</span>
                </li>
                <li>
                    <mt-button type="primary">
                        立即购买
                    </mt-button>
                    <mt-button type="danger" @click="addShopcart">
                        加入购物车
                    </mt-button>
                </li>
            </ul>
        </div>
        <!-- 过度效果内置组件 -->
        <transition name="ball" @after-enter="afterEnter">
            <div class="ball" v-if="isShow"></div>
        </transition>
        <div class="product-props">
            <ul>
                <li>商品参数</li>
                <li>商品货号：{{info.goods_no}}</li>
                <li>库存情况：{{info.stock_quantity}}件</li>
                <li>上架时间：{{info.add_time | convertTime('YYYY-MM-DD')}}</li>
            </ul>
        </div>
        <div class="product-info">
            <ul>
                <li>
                    <mt-button type="primary" size="large" plain @click="goGoodsInfo">
                        图文介绍
                    </mt-button>
                </li>
                <li>
                    <mt-button type="danger" size="large" plain @click="goGoodsComment">
                        商品评论
                    </mt-button>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
//import MyBus from '@/MyBus';
import GoodsTools from '@/GoodsTools';
import {mapActions} from 'vuex';
export default {
    data(){
        return {
            goodsId:this.$route.params.id,
            info:{},
            imgs:[],
            isShow:false,
            buyNum:1,//购买数量
        }
    },
    created() {
        let imgReq = this.$axios.get(`getthumimages/${this.goodsId}`);
        let infoReq = this.$axios.get(`getgoodsinfo/${this.goodsId}`);
        //发请求
        this.$axios.all([imgReq,infoReq])
        .then(this.$axios.spread((imgReq,infoReq)=>{
            this.imgs = imgReq.data.message;
            this.info = infoReq.data;
        }))
        .catch(err=>{})
    },
    methods: {
        ...mapActions([
            'addNumByAct',
            'changeNumByAct'
        ]),
        goGoodsInfo(){
            this.$router.push({
                name:'newsDetail',
                params:{
                    id:this.$route.params.id
                }
            })
        },
        goGoodsComment(){
            console.log('111');
            this.$router.push({
                name:'goodsComment',
                query:{
                    id:this.$route.params.id
                }
            })
        },
        substract(){
            if(this.buyNum === 1) return;
            this.buyNum --;
        },
        add(){
            if(this.info.stock_quantity === this.buyNum) return;
             this.buyNum ++;
        },
        addShopcart(){
            this.isShow = true;
        },
        afterEnter(){
            this.isShow = false;
            //购物车中添加数据
            GoodsTools.addShopcart({
                id:this.info.id,
                num:this.buyNum
            });
            //小球动画结束后传递数值
            //MyBus.$emit('addShopcart',this.buyNum);
            this.addNumByAct(this.buyNum);
        }
    },
}
</script>
<style scoped>
.ball-leave{
    opacity: 0;
}
.ball-enter-active{
    animation: bounce-in 1s;
}
@keyframes bounce-in {
    0%{
        transform: translate3d(0,0,0);
    }
    50%{
        transform: translate3d(140px, -50px, 0)
    }
    75%{
        transform: translate3d(160px, 0px, 0);
    }
    100%{
        transform: translate3d(140px, 300px, 0);
    }
}
.swiper{
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 8px;
    width: 95%;
    border-radius: 15px;
    overflow: hidden; 
}
.out-swiper,
.product-desc,
.product-props,
.product-info{
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin: 3px; 
}
.product-info{
    margin-bottom: 55px;
}
/*加减*/
.number-li span{
    display: inline-block;
    border: 2px solid rgba(0, 0,0, 0.1);
    width: 25px;
}
/*商品参数*/
.product-props ul >:nth-child(1){
    text-align: left;
}
.product-props ul:not(:nth-child(1)){
    margin-left: 40px;
}
.product-desc ul >:nth-child(1) span{
    color: blue;
    font-size: 22px;
    font-weight: bold;
}
.product-desc ul >:nth-child(1){
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.product-desc ul,
.product-info ul,
.product-props ul{
    padding-left: 10px;
}
.price-li span{
    color: red;
    font-size: 25px;
}
.number-li span{
    text-align: center;
}
.number-li >:nth-child(2){
    width: 40px;
}
.ball{
    border-radius: 50%;
    background-color: red;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 440px;
    left: 120px;
    display: inline-block;
    z-index: 9999;
}
</style>
